<template>
  <div id="container">
    <el-container>
      <el-header>
        <div class="icon" @click="toChart">
          <i class="iconfont">&#xe6dd;</i>
        </div>
        <div class="logo" @click="toChart">
          <span>懒人记账</span>
        </div>
        <el-menu router mode="horizontal" :default-active="onRoutes">
          <el-menu-item id="chart-menu" index="chart" class="iconfont icon-echarts_line" route="chart">图表</el-menu-item>
          <el-menu-item id="data-menu" index="bill" class="iconfont icon-shuju" route="bill">数据管理</el-menu-item>
        </el-menu>
        <div class="user">
          <el-dropdown :hide-timeout=300 @command="handleCommand">
            <span class="el-dropdown-link">
              {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="pw">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </div>
      </el-header>

      <el-main>
        <el-card class="main" shadow="always">
          <div class="sub-vue">
            <router-view></router-view>
          </div>
        </el-card>
      </el-main>
    </el-container>

    <pw-form :visible.sync="pwForm.visible" @pwFormClose="handleClose"></pw-form>


  </div>
</template>

<script>
import logout from "@/views/container/api/logout";
import PwForm from "@/views/container/modal/PwForm";

export default {
  name: "Container",
  components: {PwForm},
  computed: {
    name() {
      return window.localStorage.getItem('name');
    },
    onRoutes(){
      return this.$route.path.replace('/home/','')
    }
  },
  data() {
    return {
      pwForm: {
        visible: false
      }
    }
  },
  methods: {
    toChart() {
      document.getElementById('chart-menu').click();
    },
    handleCommand(command) {
      if (command === 'pw') {
        //修改密码表单
        this.pwForm.visible = true;
      } else if(command === 'logout') {
        this.logout();
      }
    },
    async logout() {
      let res = await logout();
      if (res.success) {
        window.localStorage.removeItem("token");
        window.localStorage.removeItem("tokenName");
        window.localStorage.removeItem("name");
        await this.$router.replace('/login')
      }
    },
    handleClose() {
      this.pwForm.visible = false;
    }
  }
}
</script>

<style scoped lang="less">

.el-header {

  user-select: none;

  .icon .iconfont, .logo span {
    cursor: pointer;
  }

  .icon .iconfont {
    font-size: 36px;
    line-height: 60px;
    padding-right: 10px;
    color: #599ba7;
  }

  > div, .el-menu {
    height: 100%;
    width: auto;
    float: left;

    span {
      line-height: 60px;
    }

  }

  .user {
    float: right;
  }

  .logo > img {
    height: 100px;
    width: 100px;
  }

  .el-menu .iconfont:before {
    margin-right: 5px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}

.main {
  margin: 1% 2%;

  .sub-vue {
    height: 100%;
    width: 100%;
  }

  .user {
    float: right;
  }

}

</style>
